<!-- Navigation -->
<template>
  <div class="head">
    <!-- <img id="top" src="@a/img/login/bk1.jpg" alt=""> -->
    <span class="title"><b>CHOICE</b></span>
    <div class="menu">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true" @select="headClick">
        <el-menu-item v-for="(item, index) in menuList" :index="item.path" :key="index">{{item.label}}</el-menu-item>
      </el-menu>
    </div>
    <span class="logout" @click="logout"><i class="el-icon-remove-outline"></i> logout</span>
  </div>
</template>

<script>
import menu from '@C/menu.js'
export default {
  name: 'Head',
  data() {
    return {
      menuList: menu
    }
  },
  computed: {
    activeIndex() {
      return this.$route.path
    }
  },
  methods: {
    headClick(key, keyPath) {
      console.log(key, '--', keyPath)
    },
    logout() {
      sessionStorage.removeItem('userInfo')
      sessionStorage.removeItem('tokenInfo')
      localStorage.removeItem('token')
      window.location.href = 'login.html'
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style lang="scss" scoped>
@import '@a/scss/base.scss';
@import '@a/scss/pc/head.scss';

</style>
